<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计信息</title>
    <link rel="stylesheet" href="../css/zx_tongji.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <!-- <link rel="stylesheet" href="../css/plant.css"> -->
    <link rel="stylesheet" href="../font/font.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="../lib/echarts.min.js"></script>
</head>

<body>

    <div class="container-fluid">
        <div class="row">
            <!-- 这是侧边栏 -->
            <div id="kong" class="col-md-2"></div>
            <div id="main_menu" class="col-md-2">
                <ul id="myul">
                    <li id="logoli">
                        <div><span class="iconfont icon-shouyefill"></span><a href="../index.html">首页</a>
                        </div>
                    </li>
                    <li id="have">
                        <div id="logo"><span class="iconfont icon-tongji"></span>统计</div>
                        <ul>
                            <li><a href="../pages/zx_tongji.html">种植收购统计</a></li>
                            <li><a href="../pages/saleStatistical.html">销售统计</a> </li>
                            <li><a href="../pages/dj03.html">人员统计</a> </li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-zhongzhiguanli"></span>种植养殖</div>
                        <ul>
                            <li><a href="../pages/plant.html">蔬果</a></li>
                            <li><a href="../pages/farming.html">肉类</a></li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-caigou"></span>采购收购</div>
                        <ul>
                            <li><a href="../pages/Supplier_management.html">供应商管理</a> </li>
                            <li><a href="../pages/pick_fruit.html">蔬果</a></li>
                            <li><a href="../pages/pick_meat.html">肉类</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-yunshuzhongwuliu-xianxing"></span>运输 </div>
                        <ul>
                            <li><a href="../pages/tran_meat.html">肉类运输</a> </li>
                            <li><a href="../pages/tran_ve.html">蔬菜运输</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-xinruku"></span>仓库 </div>
                        <ul>
                            <li><a href="../pages/stockIn.html">入库</a></li>
                            <li><a href="../pages/stockOut.html">出库</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-shejishengchan"></span><a href="../pages/production.html">生产</a>
                        </div>
                    </li>
                    <li>
                        <div><span class="iconfont icon-xiaoshou"></span>销售</div>
                        <ul>
                            <li><a href="../pages/zx_xiaoshou.html">销售流通</a></li>
                            <li><a href="../pages/online_sho_by.html">网购</a></li>
                            <li><a href="../pages/online_retreate.html">网购-退换记录</a></li>
                            <li><a href="../pages/zx_pima.html">批码管理</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-lajitong"></span><a
                                href="../pages/waste_management.html">废料去向</a></div>
                    </li>
                    <li>
                        <div><span class="iconfont icon-guanliyuan"></span>管理</div>
                        <ul id="secondary">
                            <li><a href="../pages/dj01.html">人员管理</a> </li>
                            <li><a href="../pages/dj02.html">操作日志</a> </li>
                            <li><a href="../pages/board.html">留言板</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="left_content" class="col-md-10">
                <!-- 这是头 -->
                <nav id="main_headnav">
                    <div class="clear">
                        <div class="navlefspan">
                            <span class="iconfont icon-caidan" id="hidenmenu"></span>
                            <span class="mytitle">食品流通安全管理系统</span>
                        </div>
                        <div class="navrigspan">
                            <span class="iconfont icon-tixing" id="tx"></span>
                            <!-- 头像 -->
                            <img src="../images/shouye/tx.jpg" alt="">
                            <!-- 姓名 -->
                            <span id="tc">退出</span>
                        </div>
                    </div>
                    <div>
                        <!-- 这里写小的头 -->
                    </div>
                </nav>
                <div id="main_content">
                    <div id="mycentent">
                        <!-- 这是内容 -->
                        <div id="box">
                            <div id="main">
                                <p id="mynav">
                                    <span>统计</span><span>></span><span class="mycolor2">种植收购统计</span>
                                </p>
                                <h3 class="mynav_h3">采购统计信息</h3>
                                <div class="clear" id="z_boos">
                                    <div id="z_box">

                                    </div>

                                    <div id="z_box2">
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

</body>
<script src="../js/index.js"></script>
<script>
    $('#add button').click(() => {
        window.location = './plant-add.html'
    })
    window.onload = function () {
        let x = $("#box").width()
        $('#box').width(x)
    }

    // 准备一个盒子用来装生产的图表


    // 初始化echarts 实例对象
    let myChart = echarts.init(document.querySelector('#z_box'))

    let myChart2 = echarts.init(document.querySelector('#z_box2'))
    // ajax
    showCan()
    function showCan() {
        $.ajax({
            url: '/zx_can',
            data: {

            },
            success: function (res) {
                if (res.error) {
                    console.log(res.error);
                } else {
                    // 指定配置项和数据
                    letoption = {
                        title: {
                            text: ' 2021.11~2022.1采购种类统计',
                            left: '-10px',
                            top: '0px',
                            textStyle: {
                                fontSize: 16, //字体大小
                                color: '#555'
                            }
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: '0',
                            top: '60px'
                        },
                        series: [
                            {
                                top: '60px',
                                left: '-20px',
                                name: '采购种类统计',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    {
                                        value: res.data[0][1].tot1, name: '蔬果' + res.data[0][1].tot1, itemStyle: {
                                            color: '#5CB9A4'
                                        }
                                    },
                                    {
                                        value: res.data[0][0].tot1, name: '肉类' + res.data[0][0].tot1, itemStyle: {
                                            color: '#FF6666'
                                        }
                                    },
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    option2 = {
                        title: {
                            text: ' 2021.11~2022.1采购统计',
                            left: '73px',
                            top: '0',
                            textStyle: {
                                fontSize: 16, //字体大小
                                color: '#555'
                            },
                        },
                        xAxis: {
                            type: 'category',
                            data: ['土豆', '南瓜', '白菜', '莲藕', '玉米', '西红柿', '苹果', '梨', '香蕉', '橘子', '草莓', '柚子', '猪', '鸡', '鸭', '鱼', '鹅']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [

                            {

                                data: [
                                    // 土豆2
                                    {
                                        value: res.data[1][5].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 南瓜3
                                    {
                                        value: res.data[1][6].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 白菜4
                                    {
                                        value: res.data[1][7].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 莲藕5
                                    {
                                        value: res.data[1][8].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 玉米6
                                    {
                                        value: res.data[1][10].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 西红柿7
                                    {
                                        value: res.data[1][9].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 苹果8
                                    {
                                        value: res.data[1][11].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 梨9
                                    {
                                        value: res.data[1][12].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 香蕉10
                                    {
                                        value: res.data[1][13].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 橘子11
                                    {
                                        value: res.data[1][14].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 草莓12
                                    {
                                        value: res.data[1][16].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 柚子13
                                    {
                                        value: res.data[1][15].tot2,
                                        itemStyle: {
                                            color: '#5CB9A4',
                                        }
                                    },
                                    // 猪14
                                    {
                                        value: res.data[1][0].tot2,
                                        itemStyle: {
                                            color: '#FF6666',
                                        }
                                    },
                                    // 鸡15
                                    {
                                        value: res.data[1][1].tot2,
                                        itemStyle: {
                                            color: '#FF6666',
                                        }
                                    },
                                    // 鸭16
                                    {
                                        value: res.data[1][3].tot2,
                                        itemStyle: {
                                            color: '#FF6666',
                                        }
                                    },
                                    // 鱼17
                                    {
                                        value: res.data[1][4].tot2,
                                        itemStyle: {
                                            color: '#FF6666',
                                        }
                                    },
                                    // 鹅18
                                    {
                                        value: res.data[1][2].tot2,
                                        itemStyle: {
                                            color: '#FF6666',
                                        }
                                    },
                                ],
                                type: 'bar'
                            }
                        ]
                    };
                    // 将数据传给实例对象
                    myChart.setOption(letoption)
                    myChart2.setOption(option2)


                }
            }
        })
    }

</script>

</html>